<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>APP调度电话</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-form-model layout="inline" :model="form">
        <!-- <a-form-model-item label="调度员姓名">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>-->
        <a-form-model-item>
          <a-button type="primary" @click="plus">+ 创建配置</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="saveSort">保存排序</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-spin tip="Loading..." :spinning="spinning">
        <div class="app_diaod">
          <table>
            <thead>
              <tr>
                <th width="12%">序号</th>
                <th width="45%">调度员姓名</th>
                <th width="30%">调度员手机号码</th>
                <th width="13%">操作</th>
              </tr>
            </thead>
            <draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
              <tr v-for="(v,k) in tablelist" :key="k">
                <td>{{k+1}}</td>
                <td>{{v.name}}</td>
                <td>{{v.phone}}</td>
                <td>
                  <div class="tabopa">
                    <a @click.stop="edit(v)">编辑</a>
                    <a @click.stop="del(v)">删除</a>
                  </div>
                </td>
              </tr>
            </draggable>
          </table>
        </div>
      </a-spin>
    </div>
    <a-modal
      v-model="visible"
      :title="isCreate ? '创建配置' : '编辑配置'"
      :body-style="{padding:'50px 40px 30px 20px'}"
      centered
      @ok="modalOK"
      @cancel="modalCancel"
    >
      <a-form-model
        ref="modalForm"
        :rules="rules"
        :model="modalForm"
        :label-col="{span:6}"
        :wrapper-col="{span:18}"
      >
        <a-form-model-item label="调度员姓名" prop="name">
          <a-input v-model="modalForm.name" :max-length="10" />
        </a-form-model-item>
        <a-form-model-item label="手机号码" prop="phone">
          <a-input v-model="modalForm.phone" :max-length="11" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {
  queryAppDispatcherConfigList,
  addAppDispatcherConfig,
  deleteAppDispatcherConfig,
  changeAppDispatcherConfigSort
} from '@/api/landCenter'
const formMessage = `必填项不能为空`
export default {
  components: {
    draggable
  },
  data () {
    return {
      form: {
        name: ''
      },
      tablelist: [],
      spinning: true,
      isCreate: false,
      visible: false,
      modalForm: {
        name: '',
        phone: ''
      },
      rules: {
        name: [{ required: true, message: formMessage, trigger: 'blur' }],
        phone: [{ required: true, message: formMessage, trigger: 'blur' }]
      },
      configId: ''
    }
  },
  methods: {
    dispatcherListRequest (e) {
      this.spinning = true
      queryAppDispatcherConfigList(e)
        .then(res => {
          this.tablelist = res.data
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
        .catch(rs => {})
    },
    addDispatcherRequest (e) {
      addAppDispatcherConfig(e).then(res => {
        if (res.code === 0) {
          this.$message.success('操作成功！')
          setTimeout(() => {
            this.visible = false
            this.dispatcherListRequest({
              ...this.form
            })
          }, 300)
        }
      })
    },
    delDispatcherRequest (e) {
      deleteAppDispatcherConfig(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.dispatcherListRequest({
              ...this.form
            })
          }
        })
        .catch(rs => {})
    },
    changeDispatcherRequest (e) {
      changeAppDispatcherConfigSort(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('排序成功！')
            setTimeout(() => {
              this.dispatcherListRequest({
                ...this.form
              })
            }, 200)
          }
        })
        .catch(rs => {})
    },
    // 拖动中与拖动结束
    getdata (evt) {
      // // console.log(evt.draggedContext.element.id)
    },
    datadragEnd (evt) {
      // // console.log('拖动前的索引 :' + evt.oldIndex)
      // // console.log('拖动后的索引 :' + evt.newIndex)
      // // console.log(this.tags)
    },
    // check () {
    //   let paramData = {
    //     ...this.form
    //   }
    //   this.dispatcherListRequest(paramData)
    // },
    saveSort () {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.tablelist.forEach((v, k) => {
        v.sort = k + 1
      })
      this.changeDispatcherRequest({
        configList: this.tablelist
      })
    },
    plus () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.isCreate = true
      this.visible = true
      this.modalForm.name = ''
      this.modalForm.phone = ''
    },
    edit (e) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.isCreate = false
      this.visible = true
      this.modalForm.name = e.name
      this.modalForm.phone = e.phone
      this.configId = e.configId
    },
    del (e) {
      if (!this.$root._bc.drop) {
        this.$message.error('您无此权限！')
        return
      }
      let _t = this
      _t.$confirm({
        title: `确定删除吗？`,
        onOk () {
          _t.delDispatcherRequest({
            configId: e.configId
          })
        }
      })
    },
    modalOK () {
      let _t = this
      _t.$refs.modalForm.validate(valid => {
        let paramId = _t.isCreate ? null : _t.configId
        if (valid) {
          if (!/^1[3456789]\d{9}$/.test(this.modalForm.phone)) {
            this.$message.error('手机号格式不正确')
            return false
          }
          _t.addDispatcherRequest({
            ..._t.modalForm,
            configId: paramId
          })
        }
      })
    },
    modalCancel () {}
  },
  mounted () {
    this.dispatcherListRequest({})
  }
}
</script>

<style lang="less" scoped>
</style>
